<template>
  <w-view>
    <layout-property :w="w" />
  </w-view>
</template>

<script>
  import $ from 'dfish-widget'
  import {markRaw} from 'vue'
  import Widget from '../Widget.vue'
  import LeafSrcTr from '../examples/LeafSrcTR.vue'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Table',
        remark: '表格',
        attrs: [{
            name: 'face',
            remark: '展示效果',
            type: 'String',
            option: '<var>cell</var>(网格效果)',
            default: ''
          }, {
            name: 'scroll-x',
            remark: '是否有横向滚动条',
            type: 'Boolean',
          },
          {
            name: 'scroll-y',
            remark: '是否有纵向滚动条',
            type: 'Boolean',
          },
        ],
        slots: [{
          name: 'default',
          remark: '表格内容',
          option: 'w-columns, w-thead, w-tbody'
        }],
        css: [{
            name: '--w-table-border-color',
            remark: 'table边线颜色值',
            default: '#ddd'
          },
          {
            name: '--w-td-border-color',
            remark: '表格td单元格边线颜色值',
            default: '#ddd'
          },
          {
            name: '--w-thead-background-color',
            remark: '表格thead表头背景色值',
            default: '#eee'
          },
        ],
        examples: [{
          remark: '带选择框的表格',
          type: 'html',
          view: true,
          code: `
            <w-table>
              <w-columns>
                <w-column width="60" align="center"></w-column>
                <w-column width="100"></w-column>
                <w-column width="*"></w-column>
              </w-columns>
              <w-thead>
                <w-tr>
                  <w-th><w-triplebox name="selectItem" :all="true"></w-triplebox></w-th>
                  <w-th>姓名</w-th>
                  <w-th>地址</w-th>
                </w-tr>
              </w-thead>
              <w-tbody>
                <w-tr>
                  <w-td><w-triplebox name="selectItem" value="1"></w-triplebox></w-td>
                  <w-td>擎天柱</w-td>
                  <w-td>半人马座α星</w-td>
                </w-tr>
                <w-tr>
                  <w-td><w-triplebox name="selectItem" value="2"></w-triplebox></w-td>
                  <w-td>威震天</w-td>
                  <w-td>赛博坦星</w-td>
                </w-tr>        
                <w-tr>
                  <w-td><w-triplebox name="selectItem" value="2"></w-triplebox></w-td>
                  <w-td>大黄蜂</w-td>
                  <w-td>塔图因星</w-td>
                </w-tr>        
              </w-tbody>
            </w-table>
            `
        }, {
          remark: '两层表头，以及跨行跨列效果',
          type: 'html',
          view: true,
          code: `
            <w-table face="cell">
              <w-columns>
                <w-column width="100" align="center"></w-column>
                <w-column width="*"></w-column>
                <w-column width="*"></w-column>
              </w-columns>
              <w-thead>
                <w-tr>
                  <w-th colspan="3">个人资料</w-th>
                </w-tr>
                <w-tr>
                  <w-th>单位</w-th>
                  <w-th>姓名</w-th>
                  <w-th>地址</w-th>
                </w-tr>
              </w-thead>
              <w-tbody>
                <w-tr>
                  <w-td rowspan="3">榕基软件</w-td>
                  <w-td>擎天柱</w-td>
                  <w-td>半人马座α星</w-td>
                </w-tr>
                <w-tr>
                  <w-td>威震天</w-td>
                  <w-td>赛博坦星</w-td>
                </w-tr>        
                <w-tr>
                  <w-td>大黄蜂</w-td>
                  <w-td>塔图因星</w-td>
                </w-tr>        
              </w-tbody>
            </w-table>
            `
        }, {
          remark: '最右边一列浮动',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-table face="cell" width="*" :scroll-x="true">
                <w-columns>
                  <w-column width="70" align="center"></w-column>
                  <w-column width="370"></w-column>
                  <w-column width="370"></w-column>
                  <w-column width="100" align="center" fixed="right"></w-column>
                </w-columns>
                <w-thead>
                  <w-tr>
                    <w-th>ID</w-th>
                    <w-th>姓名</w-th>
                    <w-th>地址</w-th>
                    <w-th>操作</w-th>
                  </w-tr>
                </w-thead>
                <w-tbody>
                  <w-tr v-for="item in rowList">
                    <w-td>{{item.id}}</w-td>
                    <w-td>{{item.name}}</w-td>
                    <w-td>{{item.address}}</w-td>
                    <w-td>编辑 删除</w-td>
                  </w-tr>
                </w-tbody>
              </w-table>
            </template>
            <${'script'}>
              data() {
                return {
                  rowList: [
                    {id: '001', name: '擎天柱', address: '半人马座α星'},
                    {id: '002', name: '威震天', address: '赛博坦星'},
                    {id: '003', name: '大黄蜂', address: '塔图因星'},
                  ]
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    rowList: [
						      {id: '001', name: '擎天柱', address: '半人马座α星'},
						      {id: '002', name: '威震天', address: '赛博坦星'},
						      {id: '003', name: '大黄蜂', address: '塔图因星'},
						    ]
						  }
						}
					}
        }, {
          remark: '可排序表格',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-table face="cell">
                <w-columns>
                  <w-column width="100"></w-column>
                  <w-column width="*"></w-column>
                  <w-column width="*"></w-column>
                </w-columns>
                <w-thead>
                  <w-tr>
                    <w-th :sortable="true" @click:sort="sort($event, 'id')">ID</w-th>
                    <w-th :sortable="true" @click:sort="sort($event, 'name')">name</w-th>
                    <w-th :sortable="true" @click:sort="sortPinyin($event, 'city')">中文拼音排序</w-th>
                  </w-tr>
                </w-thead>
                <w-tbody>
                  <w-tr v-for="row in (sortRowList || rowList)">
                    <w-td>{{row.id}}</w-td>
                    <w-td>{{row.name}}</w-td>
                    <w-td>{{row.city}}</w-td>
                  </w-tr>
                </w-tbody>
              </w-table>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    sortRowList: null,
                    rowList: [
                      {id: '001', name: 'red', city: '北京'},
                      {id: '003', name: 'blue', city: '上海'},
                      {id: '002', name: 'green', city: '广州'},
                    ]
                  }
                },
                methods: {
                  sort(e, prop) {
                    let order = e.value
                    if (order) {
                      this.sortRowList = this.rowList.concat().sort((a, b) => (a[prop] > b[prop] ? 1 : -1) * (order == 'asc' ? 1 : -1))
                    } else {
                      this.sortRowList = null
                    }
                  },
                  sortPinyin(e, prop) {
                    let order = e.value
                    if (order) {
                      this.sortRowList = this.rowList.concat().sort((a, b) => a[prop].localeCompare(b[prop], 'zh-CN') * (order == 'asc' ? 1 : -1))
                    } else {
                      this.sortRowList = null
                    }
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    sortRowList: null,
						    rowList: [{
						        id: '001',
						        name: 'red',
						        city: '北京'
						      },
						      {
						        id: '003',
						        name: 'blue',
						        city: '上海'
						      },
						      {
						        id: '002',
						        name: 'green',
						        city: '广州'
						      },
						    ]
						  }
						},
						methods: {
						  sort(e, prop) {
						    let order = e.value
						    if (order) {
						      this.sortRowList = this.rowList.concat().sort((a, b) => (a[prop] > b[prop] ? 1 : -1) * (order ==
						        'asc' ? 1 : -1))
						    } else {
						      this.sortRowList = null
						    }
						  },
						  sortPinyin(e, prop) {
						    let order = e.value
						    if (order) {
						      this.sortRowList = this.rowList.concat().sort((a, b) => a[prop].localeCompare(b[prop], 'zh-CN') * (order ==
						        'asc' ? 1 : -1))
						    } else {
						      this.sortRowList = null
						    }
						  }
						}
					}
        }, {
          remark: '树形表格',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-table face="cell">
                <w-columns>
                  <w-column width="200"></w-column>
                  <w-column width="*"></w-column>
                </w-columns>
                <w-thead>
                  <w-tr>
                    <w-th>地区</w-th>
                    <w-th>区号</w-th>
                  </w-tr>
                </w-thead>
                <w-tbody :children="rowList">
                  <template #row="{item, index}">
                    <w-tr :children="item.children">
                      <w-td><w-leaf :text="item.name" :expanded="item.expanded" :children="item.children"/></w-td>
                      <w-td>{{item.code}}</w-td>
                    </w-tr>
                  </template>
                </w-tbody>
              </w-table>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    rowList: [
                      {id: '100', name: '福建省', code: '0591', children: [
                        {id: '110', name: '福州市', code: '0591'},
                        {id: '120', name: '厦门市', code: '0592'}
                      ]},
                      {id: '200', name: '广东省', code: '020', expanded: true, children: [
                        {id: '210', name: '广州市', code: '020'},
                        {id: '220', name: '深圳市', code: '0755', children: [
                          {id: '221', name: '福田区', code: '0755'},
                          {id: '222', name: '罗湖区', code: '0755'}
                        ]}
                      ]},
                    ]
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    rowList: [
						      {id: '100', name: '福建省', code: '0591', children: [
						        {id: '110', name: '福州市', code: '0591'},
						        {id: '120', name: '厦门市', code: '0592'}
						      ]},
						      {id: '200', name: '广东省', code: '020', expanded: true, children: [
						        {id: '210', name: '广州市', code: '020'},
						        {id: '220', name: '深圳市', code: '0755', children: [
						          {id: '221', name: '福田区', code: '0755'},
						          {id: '222', name: '罗湖区', code: '0755'}
						        ]}
						      ]}
						    ]
						  }
						}
					}
        }, {
          remark: '树形表格异步加载',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-table face="cell">
                <w-columns>
                  <w-column width="200"></w-column>
                  <w-column width="*"></w-column>
                </w-columns>
                <w-thead>
                  <w-tr>
                    <w-th>地区</w-th>
                    <w-th>区号</w-th>
                  </w-tr>
                </w-thead>
                <w-tbody :children="rowList">
                  <template #row="{item, index}">
                    <w-tr :children="item.children">
                      <w-td><w-leaf :text="item.name" :expanded="item.expanded" :src="getSrc(item)" :children="item.children"/></w-td>
                      <w-td>{{item.code}}</w-td>
                    </w-tr>
                  </template>
                </w-tbody>
              </w-table>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    rowList: [
                      {id: '100', name: '福建省', code: '0591', hasChild: true},
                      {id: '200', name: '广东省', code: '020', hasChild: true},
                    ]
                  }
                },
                methods: {
                  getSrc(data) {
                    if (!data.hasChild) return null
                    //return () => $.ajax.get($.urlParam('/getdata.php', {id: data.id})).then(res => data.children = res)
                    //在API环境下用下面的方法模拟获取远端数据；实际开发中应使用类似上面注释的语句
                    return () => new Promise(resolve => {
                      let n1 = Math.floor(Math.random () * 900) + 100
                      let n2 = Math.floor(Math.random () * 900) + 100
                      setTimeout(() => resolve([
                        {id: n1, name: '子节点_' + n1, code: n1},
                        {id: n2, name: '子节点_' + n2, code: n2},
                      ]), 300)
                    }).then(res => data.children = res)
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    rowList: [
						      {id: '100', name: '福建省', code: '0591', hasChild: true},
						      {id: '200', name: '广东省', code: '020', hasChild: true},
						    ]
						  }
						},
						methods: {
						  getSrc(data) {
						    if (!data.hasChild) return null
						    //return () => $.ajax.get($.urlParam('/getdata.php', {id: data.id})).then(res => data.children = res)
						    //在API环境下用下面的方法模拟获取远端数据；实际开发中应使用类似上面注释的语句
						    return () => new Promise(resolve => {
						      let n1 = Math.floor(Math.random () * 900) + 100
						      let n2 = Math.floor(Math.random () * 900) + 100
						      setTimeout(() => resolve([
						        {id: n1, name: '子节点_' + n1, code: n1},
						        {id: n2, name: '子节点_' + n2, code: n2},
						      ]), 300)
						    }).then(res => data.children = res)
						  }
						}
					}
        }]
      }
    }
  }
</script>

<style>
</style>
